<script setup lang="ts">
import { onActivated, onDeactivated, ref, computed, nextTick, onMounted } from "vue"
import { useRouter } from "vue-router"
import useAppStore from "../pinia"
import dicePopup from "@/components/dicePopup.vue"
import {
    initSetting,
    setDiceNumber,
    setUseDice,
    setPrizeList,
    addPrizeNameHistory,
    resetPrizeList,
    addPlan,
    deleteAllPlan,
    deleteOnePlan,
    setTheme,
    blockListMode1,
    blockListMode2,
} from "../utils/utils"
import _ from "lodash"

const app = useAppStore()
const router = useRouter()

const dicePopupRef = ref(null) as any

const openDrawer = ref(false)
const showSetting = () => {
    openDrawer.value = true
}

// 图库 读取所有已上传的图片
const selectedImage = ref(null) as any
const imageList = ref<string[]>([])
const initImageList = () => {
    // 使用import读取'/static/uploads/'目录下的所有图片
    const images = import.meta.glob("/static/uploads/*")
    for (const key in images) {
        imageList.value.push(key)
    }
}

// 选择器 当前选择 奖品方案名字
const prizePlanItem = ref(null) as any
const setting = ref({
    diceNumber: 7,
    useDice: false,
    prizeList: [],
    prizeNameHistory: [],
    prizePlan: [],
    theme: "默认主题", // 主题名字
}) as any
const init = async () => {
    // 初始化setting
    const initData = await initSetting()
    setting.value.diceNumber = initData.diceNumber
    setting.value.useDice = initData.useDice
    setting.value.prizeList = initData.prizeList
    setting.value.prizeNameHistory = initData.prizeNameHistory
    setting.value.prizePlan = initData.prizePlan
    setting.value.theme = initData.theme
    console.log("init 完成", setting.value)
}

const blockList = ref([]) as any
const initBlockList = (reset = true) => {
    console.log("initBlockList theme", setting.value.theme)
    // 初始化格子
    let arr = []
    if (setting.value.theme == "栗子大富翁(竖屏)") arr = blockListMode2()
    else arr = blockListMode1()
    console.log("arr", arr)
    blockList.value = arr.map((item: any, index: number) => {
        item.showNumber = item.value === 1 || item.value % 5 === 0
        if (reset) {
            item.active = false
            item.forNowActive = false
        }
        let prizeListItem = setting.value.prizeList[index]
        item.prize = {
            name: prizeListItem.name,
            img: prizeListItem.img,
        }
        return item
    })
}

const targetUserActive = ref(0) // 当前走到的格子index
const randomNumber = ref(0) // 随机到的数字
const hasRandom = ref(false) // 正在随机
const formatNumber = computed(() => {
    // 显示的数字
    return randomNumber.value < 10 ? `0${randomNumber.value}` : randomNumber.value
})

const getAddRandomNumber = () => {
    let addRandom = _.random(1, blockList.value.length)
    return addRandom
}

const handleClickRandomNumber = (number: any, type = 1) => {
    if (setting.value.useDice && number === "none") return rotate() // 使用骰子
    if (hasRandom.value) return
    hasRandom.value = true // 正在随机
    if (type == 1) randomNumber.value = 0 // 重置随机到的数字
    blockList.value = blockList.value.map((item: any) => {
        item.active = false
        item.forNowActive = false
        return item
    })
    const blockNumber = blockList.value.length

    let addRandom = number === "none" ? getAddRandomNumber() : number // 随机增加的数字
    let addRandom1 = addRandom // 随机增加的数字 备份 给raf2使用
    let activeIndex = targetUserActive.value // 当前格子位置 给raf2使用
    let rafId = null as any // raf1的id
    let rafId1 = null as any // raf2的id
    let raf1 = null

    if (type == 1) {
        // 开始数字滚动 使用raf1
        raf1 = () => {
            randomNumber.value += 1 // 一直累加到addRandom
            addRandom -= 1
            if (addRandom <= 0) {
                cancelAnimationFrame(rafId)
                // 数字滚动结束 开始走格子
                // rafId1 = requestAnimationFrame(raf2)
                rafId1 = setTimeout(() => {
                    raf2()
                }, 200)
            } else {
                requestAnimationFrame(raf1)
            }
        }
    } else if (type == 2) {
        // 手动输入 不进行数字滚动 直接走格子
        rafId1 = setTimeout(() => {
            raf2()
        }, 200)
    }

    // 走格子 使用raf2
    const raf2 = () => {
        activeIndex += 1 // 当前active的格子index + 1
        if (activeIndex > blockNumber - 1) {
            // 如果大于最大格子数 则重置为0
            activeIndex = 0
        }
        addRandom1 -= 1 // 累加值 - 1
        if (addRandom1 <= 0) {
            // 走格子结束
            console.log("activeIndex", activeIndex)
            blockList.value[activeIndex].active = true
            targetUserActive.value = activeIndex
            hasRandom.value = false
            // cancelAnimationFrame(rafId1)
            clearTimeout(rafId1)
            rafId1 = null
        } else {
            let indexForNow = activeIndex // 暂时亮起的index
            blockList.value[indexForNow].forNowActive = true
            targetUserActive.value = indexForNow
            // requestAnimationFrame(raf2)
            rafId1 = setTimeout(() => {
                raf2()
            }, 200)
            setTimeout(() => {
                blockList.value[indexForNow].forNowActive = false
            }, 200)
        }
    }

    if (type == 1 && raf1) rafId = requestAnimationFrame(raf1) // 开始数字滚动
}

const to = (isBack = false) => {
    if (hasRandom.value) return
    if (isBack) {
        // 取消当前格子 并后退一步
        blockList.value[targetUserActive.value].active = false
        targetUserActive.value = targetUserActive.value - 1 < 0 ? blockList.value.length - 1 : targetUserActive.value - 1
    } else {
        // 前进一个格子 并选中
        targetUserActive.value = targetUserActive.value + 1 > blockList.value.length - 1 ? 0 : targetUserActive.value + 1
        blockList.value[targetUserActive.value].active = true
    }
}

const reset = () => {
    if (hasRandom.value) return
    randomNumber.value = 0
    targetUserActive.value = 0
    blockList.value = blockList.value.map((item: any) => {
        item.active = false
        item.forNowActive = false
        return item
    })
}

const hasRotate = ref(false) // 正在摇色子
const rotate = () => {
    hasRotate.value = true
    dicePopupRef.value?.rotate()
}
const rotateEnd = (num: number) => {
    // 骰子摇完 走格子
    handleClickRandomNumber(num)
}

// 设置相关
const handleUseDiceChange = (e: boolean) => setUseDice(e)
const handleDiceNumberChange = (e: number) => setDiceNumber(e)
const handleResetPrize = async () => {
    const resSetting = await resetPrizeList()
    setting.value.prizeList = resSetting.prizeList
    initBlockList() // 更新格子
}
const handlePrizeNameChange = (e: any, index: number) => {
    const value = e.target.value
    setting.value.prizeList[index].name = value // 更新设置表单
    setPrizeList(setting.value.prizeList) // 更新localStorage
    initBlockList() // 更新格子
}
const handleUpload = async (e: any, index: number) => {
    const file = e.target.files[0]
    // 读取文件为ArrayBuffer
    const arrayBuffer = await file.arrayBuffer()
    try {
        // 后缀名
        const ext = file.name.split(".").pop()
        let name = Date.now() + "." + ext
        fetch("/upload", {
            method: "POST",
            body: arrayBuffer,
            headers: {
                "X-File-Name": encodeURIComponent(name), // 手动发送文件名
                "Content-Type": "application/octet-stream", // 二进制流
            },
            cache: "no-store",
        }).then((res) => {
            console.log("upload 文件上传成功 res", res)
        })
        const resName = "/static/uploads/" + name
        setting.value.prizeList[index].img = resName // 更新设置表单
        setPrizeList(setting.value.prizeList) // 更新localStorage
        initBlockList() // 更新格子
        initImageList() // 更新历史图库
    } catch (error: any) {
        console.log("上传失败: " + error.message)
    }
}

const handleSelect = (url: any, index: number) => {
    setting.value.prizeList[index].img = url // 更新设置表单
    setPrizeList(setting.value.prizeList) // 更新localStorage
    initBlockList() // 更新格子
}

const mouseDown = (index: number) => {
    // 打开设置 settingFrom滚动到对应id的表单
    showSetting()
    setTimeout(() => {
        const dom = document.getElementById("prizeFrom" + index)
        console.log('"prizeFrom" + index', "prizeFrom" + index)
        if (dom) {
            // 距离顶部的距离
            const top = dom.getBoundingClientRect().top - 100
            // .settingFrom 滚动
            const settingFrom = document.querySelector(".settingFrom")
            if (settingFrom) {
                settingFrom.scrollTo({
                    top: top,
                    behavior: "smooth",
                })
            }
        }
    }, 500)
}

// 中心输入框相关
const inputRef = ref(null) as any
const handleKeyDown = (e: any) => {
    const isEnter = e.keyCode === 13
    let value = inputRef.value?.value
    if (isEnter && value) {
        if (value <= 0) return
        if (value > 40) value = 40
        value = parseInt(value)
        randomNumber.value = value
        console.log("handleKeyDown randomNumber.value", randomNumber.value)
        handleClickRandomNumber(value, 2)
    }
}

const openSavePlanModal = ref(false)
const handleShowSavePlanModal = () => {
    openSavePlanModal.value = true
    savePlanName.value = ""
}
const savePlanName = ref("")
const handleSavePlanModalOk = () => {
    let name = savePlanName.value.trim()
    if (name != "") {
        openSavePlanModal.value = false
        let newPlanData = setting.value.prizeList
        addPlan(name, newPlanData).then((resPrizePlan: any) => {
            setting.value.prizePlan = resPrizePlan
            prizePlanItem.value = name
        })
    }
}
const setPlant = async () => {
    let planIndex = setting.value.prizePlan.findIndex((i: any) => i.name == prizePlanItem.value)
    if (planIndex > -1) {
        let item = setting.value.prizePlan[planIndex]
        setting.value.prizeList = item.data
        initBlockList() // 更新格子
        await setPrizeList(setting.value.prizeList) // 更新localStorage
    }
}
const deleteThatPlan = async () => {
    let planIndex = setting.value.prizePlan.findIndex((i: any) => i.name == prizePlanItem.value)
    if (planIndex > -1 && prizePlanItem != "默认方案") {
        const resPlan = await deleteOnePlan(planIndex)
        setting.value.prizePlan = resPlan
        prizePlanItem.value = null
    }
}
const deletePlan = () => {
    prizePlanItem.value = null
    deleteAllPlan()
    setTimeout(async () => {
        await init()
    }, 500)
}
const handleSetTheme = async () => {
    const theme = setting.value.theme
    await setTheme(theme)
    initBlockList() // 更新格子
}

// 导入导出方案 先注释 方案可导出 但是图片是保存在本地的 不好做
const handleExportJson = () => {
    const plan = setting.value.prizePlan
    const name = "我的方案" + Date.now()
    fetch("/export-json", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "x-file-name": encodeURIComponent(name),
        },
        body: JSON.stringify(plan),
    }).then((res) => {
        console.log("handleExportJson res", res)
    })
}
const fileInputRef = ref(null) as any
const triggerFileInput = () => {
    fileInputRef.value.click()
}
const validateFile = (file: any) => {
    const isJson = file.type === "application/json" || file.name.endsWith(".json")
    if (!isJson) {
        console.log("请上传有效的JSON文件")
        return false
    }
    return true
}
const readFile = (file: any) => {
    const reader = new FileReader()
    reader.onload = (e: any) => {
        try {
            const content = JSON.parse(e.target.result)
            console.log("解析JSON成功", content)
        } catch (err: any) {
            console.log("解析JSON失败", err.message)
        }
    }
    reader.onerror = () => {
        console.log("读取文件失败")
    }
    reader.readAsText(file)
}
const handleFileChange = (e: any) => {
    const file = e.target.files[0]
    if (file && validateFile(file)) {
        readFile(file)
    }
    e.target.value = ""
}

onMounted(async () => {
    await init()
    initBlockList(true)
    initImageList()
})

onActivated(() => {})

onDeactivated(() => {})
</script>

<template>
    <div class="pageIndex flex flex-col items-center justify-center">
        <!-- 设置按钮 -->
        <div class="setting" @click="showSetting">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
                <path
                    d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"
                />
            </svg>
        </div>

        <div class="bg">
            <div class="bgImgBox">
                <img v-if="setting.theme == '栗子大富翁'" class="bgImg" src="@img/theme1/bg.png" />
                <img v-else-if="setting.theme == '栗子大富翁(竖屏)'" class="bgImg" src="@img/theme2/竖屏栗子背景.png" />
                <!-- <img v-else-if="setting.theme == '栗子大富翁(竖屏)'" class="bgImg" src="@img/theme2/背景.png" /> -->
                <img v-else class="bgImg" src="@img/bg.png" />
                <img class="liziLogo" v-if="setting.theme == '栗子大富翁(竖屏)'" src="@img/theme2/竖屏栗子logo.png" />
                <div
                    class="block flex items-center justify-center"
                    v-for="(i, index) in blockList"
                    @click="mouseDown(index)"
                    :key="index"
                    :style="{
                        left: i.left,
                        top: i.top,
                    }"
                    :class="{ active: i.active || i.forNowActive, one: i.value === 1, theme1: setting.theme == '栗子大富翁', theme2: setting.theme == '栗子大富翁(竖屏)' }"
                >
                    <template v-if="i.prize">
                        <img class="prize" :src="i.prize.img" />
                    </template>
                    <template v-else>
                        {{ i.showNumber ? i.value : "" }}
                        <svg v-if="i.value > 1 && i.value < 5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-double-up arrow" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z" />
                            <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" />
                        </svg>
                    </template>

                    <template v-if="targetUserActive == index || (targetUserActive == -1 && index == 0)">
                        <img v-if="setting.theme == '栗子大富翁' || setting.theme == '栗子大富翁(竖屏)'" class="head" src="@img/theme1/head.png" />
                        <img v-else class="head" src="@img/head.png" />
                    </template>
                </div>

                <div v-if="setting.theme != '栗子大富翁(竖屏)'" class="numberInputBox flex items-center">
                    <img v-if="setting.theme == '栗子大富翁'" src="@img/theme1/random.png" @click="handleClickRandomNumber('none')" />
                    <img v-else src="@img/random.png" @click="handleClickRandomNumber('none')" />
                    <div class="numberBox">
                        <input ref="inputRef" type="number" :value="formatNumber" :min="0" :max="40" @keydown="handleKeyDown" />
                    </div>
                    <img v-if="setting.theme == '栗子大富翁'" src="@img/theme1/reset.png" @click="reset" />
                    <img v-else src="@img/reset.png" @click="reset" />
                </div>

                <!-- 栗子大富翁(竖屏)专属按钮 -->
                <div v-else class="buttonsTheme2 flex items-center">
                    <img src="@img/theme2/竖屏栗子随机.png" @click="handleClickRandomNumber('none')" />
                    <img class="reset" src="@img/theme2/竖屏栗子重置.png" @click="reset" />
                </div>

                <!-- 栗子大富翁(竖屏)专属数字输入框 -->
                <div v-if="setting.theme == '栗子大富翁(竖屏)'" class="numberInputBoxTheme2">
                    <input ref="inputRef" type="number" :value="formatNumber" :min="0" :max="40" @keydown="handleKeyDown" />
                </div>
            </div>
            <div class="bgButtonList flex items-center" v-if="setting.theme != '栗子大富翁(竖屏)'">
                <img v-if="setting.theme == '栗子大富翁'" src="@img/theme1/back.png" @click="to(true)" />
                <img v-else src="@img/back.png" @click="to(true)" />
                <img v-if="setting.theme == '栗子大富翁'" src="@img/theme1/next.png" @click="to(false)" />
                <img v-else src="@img/go.png" @click="to(false)" />
            </div>
        </div>

        <dicePopup :diceNumber="setting.diceNumber" ref="dicePopupRef" @rotateEnd="rotateEnd" />

        <a-modal v-model:open="openSavePlanModal" title="保存当前方案" @ok="handleSavePlanModalOk" cancelText="取消" okText="保存">
            <div class="modalBox">
                <a-input v-model:value="savePlanName" placeholder="请输入方案名称" />
            </div>
        </a-modal>

        <a-drawer :destroyOnClose="true" width="80vmin" title="设置" v-model:open="openDrawer" placement="right" :closable="false" :bodyStyle="{ padding: '0' }">
            <div class="settingFrom">
                <div class="item">
                    <div class="title">转盘主题</div>
                    <div class="fromItem flex">
                        <a-select @change="handleSetTheme" v-model:value="setting.theme" style="flex: 1" placeholder="请选择已保存的方案">
                            <a-select-option value="默认主题">默认主题</a-select-option>
                            <a-select-option value="栗子大富翁">栗子大富翁</a-select-option>
                            <a-select-option value="栗子大富翁(竖屏)">栗子大富翁(竖屏)</a-select-option>
                        </a-select>
                    </div>
                </div>
                <div class="item">
                    <div class="title">使用骰子</div>
                    <div class="fromItem">
                        <a-switch @change="handleUseDiceChange" v-model:checked="setting.useDice" />
                    </div>
                </div>
                <div class="item" v-if="setting.useDice">
                    <div class="title">骰子数量：{{ setting.diceNumber }}</div>
                    <div class="fromItem">
                        <a-slider @change="handleDiceNumberChange" v-model:value="setting.diceNumber" :min="1" :max="8" />
                    </div>
                </div>
                <div class="item">
                    <div class="title flex items-center justify-between">
                        <div>商品设置</div>
                        <a-popconfirm title="确认重置" okText="确认" cancelText="取消" @confirm="handleResetPrize">
                            <div class="button">重置商品</div>
                        </a-popconfirm>
                    </div>
                    <div class="fromItem flex items-center">
                        <div class="prizeIndex" style="margin-bottom: 0">商品方案</div>
                        <a-select v-model:value="prizePlanItem" style="flex: 1; margin-left: 1vmin" placeholder="请选择已保存的方案">
                            <a-select-option v-for="(plan, planIndex) in setting.prizePlan" :key="planIndex" :value="plan.name">{{ plan.name }}</a-select-option>
                        </a-select>
                        <div class="button" style="margin-left: 1vmin" @click="setPlant">应用方案</div>
                        <!-- <div class="button" style="margin-left: 1vmin" @click="deletePlan">删除所有方案</div> -->
                        <a-popconfirm v-if="prizePlanItem != null && prizePlanItem != '默认方案'" :title="`确认删除方案“${prizePlanItem}”？`" okText="确认" cancelText="取消" @confirm="deleteThatPlan">
                            <div class="button" style="margin-left: 1vmin">删除此方案</div>
                        </a-popconfirm>
                        <div class="button" style="margin-left: 1vmin" @click="handleShowSavePlanModal">保存并创建新方案</div>
                    </div>
                    <!-- <div class="fromItem flex items-center">
                        <div class="button" @click="handleExportJson">导出所有本地方案</div>
                        <div class="button" @dragover.prevent style="margin-left: 1vmin" @click="triggerFileInput">
                            <input type="file" ref="fileInputRef" accept=".json,application/json" @change="handleFileChange" class="hiddenInput" />
                            导入方案
                        </div>
                    </div> -->
                    <div class="fromItem" v-for="(item, index) in setting.prizeList" :key="index" :id="'prizeFrom' + index">
                        <div class="prizeIndex">商品{{ index + 1 }}</div>
                        <div class="label flex items-center">
                            <div class="labelName">商品名称</div>
                            <!-- <a-auto-complete @change="handlePrizeNameChange($event, index)" class="input" :value="item.name" :options="setting.prizeNameHistory" placeholder="请输入商品名称" /> -->
                            <a-input @change="handlePrizeNameChange($event, index)" v-model:value="item.name" placeholder="请输入商品名称" />
                        </div>
                        <div class="label flex items-center">
                            <div class="labelName">商品图片</div>
                            <div class="selectImageBox flex items-center">
                                <div class="fileBox">
                                    <input class="file" type="file" accept="image/*" @change="handleUpload($event, index)" />
                                    <img class="prizeImg" v-if="item.img" :src="item.img" />
                                </div>
                            </div>
                        </div>
                        <div class="label flex items-center" v-if="imageList && imageList.length">
                            <div class="labelName"></div>
                            <a-select
                                :bordered="false"
                                :dropdownMenuStyle="{
                                    color: '#000',
                                }"
                                popupClassName="imageGridBox"
                                v-model:value="selectedImage"
                                style="width: 12vmin; display: flex; align-items: center; justify-content: center"
                                :dropdownMatchSelectWidth="false"
                                :dropdownStyle="{ width: '300px', padding: '10px' }"
                            >
                                <template #dropdownRender>
                                    <div class="imageGrid">
                                        <div v-for="(url, imgIndex) in imageList" :key="imgIndex" class="imageItem" @click="handleSelect(url, index)">
                                            <img :src="url" />
                                        </div>
                                    </div>
                                </template>

                                <template #suffixIcon>历史图库</template>
                            </a-select>
                        </div>
                    </div>
                </div>
            </div>
        </a-drawer>
    </div>
</template>

<style lang="scss">
.modalBox {
    padding: 3vmin 0;
}
.imageGridBox {
    .deleteButton {
        padding: 0.5vmin 2vmin;
        background: #209cff;
        color: #fff;
        border-radius: 0.5vmin;
        text-align: center;
        cursor: pointer;
    }
    .imageGrid {
        max-height: 30vh;
        overflow-y: scroll;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        .imageItem {
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;

            &:hover {
                transform: scale(1.05);
            }

            img {
                width: 80px;
                height: 80px;
                object-fit: contain;
                border-radius: 4px;
            }
        }
    }
}
.settingFrom {
    padding: 3vmin 4vmin;
    height: 100%;
    overflow-y: scroll;
    .item {
        margin-bottom: 2vmin;
        .button {
            padding: 1vmin 2vmin;
            font-size: 1.5vmin;
            font-weight: 400;
            color: #fff;
            background: #209cff;
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 0.5vmin;
            flex-shrink: 0;
            position: relative;
            &:hover {
                transform: scale(1.1);
            }
            .hiddenInput {
                position: absolute;
                opacity: 0;
                width: 0.1px;
                height: 0.1px;
                overflow: hidden;
                z-index: -1;
            }
        }
        .title {
            font-size: 2vmin;
            margin-bottom: 2vmin;
            font-weight: 600;
        }
        .fromItem {
            width: 100%;
            margin-bottom: 2vmin;
            padding-bottom: 2vmin;
            // 虚线边框
            border-bottom: 1px dashed #ccc;
            .prizeIndex {
                margin-bottom: 1vmin;
                font-size: 2vmin;
                color: #209cff;
                font-weight: 600;
                flex-shrink: 0;
            }
            .input {
                width: 100%;
            }

            .selectImageBox {
                height: 10vmin;
                position: relative;

                .fileBox {
                    height: 100%;
                    width: max-content;
                    .file {
                        opacity: 0;
                        height: 100%;
                        cursor: pointer;
                    }
                    .prizeImg {
                        height: 100%;
                        object-fit: cover;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 0;
                        pointer-events: none;
                    }
                }
            }

            .label {
                margin-bottom: 1vmin;
                .labelName {
                    flex-shrink: 0;
                    margin-right: 1vmin;
                }
            }
        }
    }
}
.pageIndex {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(-90deg, #d3eee0, #d3e6f2, #d8dbf7, #f4e8fa);
    // 筛子容器 提供景深
    perspective: 100vmin;

    @keyframes buttonHover {
        // 呼吸 并循环轻微旋转
        0% {
            transform: scale(1) rotate(0deg);
        }
        25% {
            transform: scale(1.1) rotate(5deg);
        }
        50% {
            transform: scale(1) rotate(0deg);
        }
        75% {
            transform: scale(1.1) rotate(-5deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .bg {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 0;
        .bgImgBox {
            width: max-content;
            height: 100%;
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: auto;
            .bgImg {
                object-fit: cover;
                height: 100%;
                z-index: 1;
            }

            .liziLogo {
                z-index: 2;
                position: absolute;
                bottom: 7%;
                left: 5%;
                width: 20%;
                object-fit: cover;
            }

            .block {
                position: absolute;
                z-index: 2;
                width: 10vmin;
                height: 10vmin;
                background: #fff3a9;
                border-radius: 1.2vmin;
                border: 0.8vmin solid #ffb607;
                font-size: 6vmin;
                font-weight: bolder;
                color: rgb(255, 182, 7, 0.4);
                transition: all 0.5s;

                &.theme1 {
                    background: #ecf6ff;
                    border: 0.8vmin solid #7b95f5;

                    &.one {
                        background: #adbeff;
                    }
                }

                &.theme2 {
                    width: 14vh;
                    height: 14vh;
                    background: #ffdba4;
                    border: 0.6vmin solid #842d0e;
                    &.one {
                        background: #ffdba4;
                    }
                    &.active {
                        border: 0.6vmin solid #0af467;
                        transform: scale(1.05);
                    }
                    .prize {
                        height: 12vmin;
                    }
                }

                &.active {
                    border: 0.8vmin solid #0af467;
                    transform: scale(1.2);
                }

                &.one {
                    color: #ffb607;
                    background: #ffce5a;
                }

                .arrow {
                    width: 8vmin;
                    height: 8vmin;
                    color: #ffd458;
                }

                .head {
                    width: 9vmin;
                    height: 9vmin;
                    object-fit: contain;
                    position: absolute;
                    top: 30%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .prize {
                    height: 8vmin;
                    object-fit: contain;
                    position: relative;
                }
            }

            .numberInputBoxTheme2 {
                position: absolute;
                z-index: 2;
                width: 32%;
                height: 11.5%;
                top: 32%;
                left: 35.5%;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 1vmin;
                font-weight: bolder;
                font-size: 7vmin;
                color: #842d0e;
                input {
                    width: 100%;
                    height: 100%;
                    // 基线对齐
                    vertical-align: middle;
                    text-align: center;
                    // 隐藏数字输入框的默认样式
                    -moz-appearance: textfield; // Firefox
                    &::-webkit-inner-spin-button, // Chrome
                        &::-webkit-outer-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }
                }
            }

            .buttonsTheme2 {
                position: absolute;
                z-index: 2;
                left: 32%;
                top: 46%;
                img {
                    width: 11vmin;
                    height: 11vmin;
                    cursor: pointer;
                    &:hover {
                        animation: buttonHover 1s infinite;
                    }
                    &.reset {
                        margin-left: 24%;
                    }
                }
            }

            .numberInputBox {
                position: absolute;
                z-index: 2;
                left: 35.5%;
                top: 43%;
                .numberBox {
                    background: #ffffff;
                    border-radius: 9999px;
                    border: 0.5vmin solid #000000;
                    margin: 0 2vmin;
                    color: #000;
                    font-size: 7vmin;
                    font-weight: bolder;
                    width: 24vmin;
                    height: 11vmin;
                    input {
                        width: 100%;
                        height: 100%;
                        // 基线对齐
                        vertical-align: middle;
                        text-align: center;
                        // 隐藏数字输入框的默认样式
                        -moz-appearance: textfield; // Firefox
                        &::-webkit-inner-spin-button, // Chrome
                        &::-webkit-outer-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }
                    }
                }
                img {
                    width: 11vmin;
                    height: 11vmin;
                    cursor: pointer;
                    &:hover {
                        animation: buttonHover 1s infinite;
                    }
                }
            }
        }

        .bgButtonList {
            z-index: 3;
            position: absolute;
            left: 39.5%;
            bottom: 21%;
            img {
                width: 11vmin;
                height: 11vmin;
                margin-left: 12vmin;
                cursor: pointer;
                &:hover {
                    animation: buttonHover 1s infinite;
                }
            }
        }
    }

    .setting {
        position: fixed;
        top: 3vmin;
        right: 4vmin;
        padding: 2vmin;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        z-index: 1;
        &:hover {
            animation: spin 1s linear infinite;
        }
        svg {
            width: 2vmin;
            height: 2vmin;
        }
    }

    .pageBottom {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 3vmin 4vmin;
        z-index: 1;
        .button {
            padding: 4vmin 10vmin;
            background: linear-gradient(0deg, #209cff, #68e0cf);
            color: #ffffff;
            border-radius: 1vmin;
            box-shadow: 0 0 1vmin rgba(0, 0, 0, 0.1);
            cursor: pointer;
            &:hover {
                animation: buttonHover 0.5s infinite;
            }
        }
    }
}
</style>
